*{
    font-family: PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica
    ,Arial,PingFangSC-Regular,"Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB"
    ,"Microsoft YaHei","微软雅黑",Arial,sans-serif,
    PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,
    "微软雅黑", "宋体", "Helvetica Neue", Arial, Helvetica, sans-serif;

}
body {
    /* font-family: PingFangSC-Regular,"Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif; */
    font-family: PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica
    ,Arial,PingFangSC-Regular,"Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB"
    ,"Microsoft YaHei","微软雅黑",Arial,sans-serif,
    PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial;
    margin: 0;
    text-decoration: none;
    padding: 0;
    color: #333;
    background: #fff;

}
h3{line-height: 30px;font-size: 24px;color: #333333;font-weight: normal;}
a{text-decoration: none;color: #333333;}
li{ list-style: none;}
img{transition: all 1s;cursor: pointer;}
img:hover{   filter:alpha(opacity=60); -moz-opacity: 0.6;opacity: 0.6; }
a:hover{color:#3498db;text-decoration: none;}
/*头部导航栏*/
.homeheader{height:  64px; width:100%; background: #202020; color: white; margin: 0;padding: 0;}

.homeheader .centre{height: 100%;width: 80%;margin: 0 auto;}

.homeheader .centre .left{height:100%;float: left;}
.homeheader .centre .left img{height:100%;}

.homeheader .centre .homeheader_centre{height: 100%; width: 83%;float: left;display: flex;justify-content: space-evenly;}
.homeheader .centre .homeheader_centre li{height:100%; line-height: 64px; font-size: 0.9rem; color: #FFFFFF;}
.homeheader .centre .homeheader_centre li a{color: #FFFFFF; font-size: 1.5rem;}
.homeheader .centre .homeheader_centre li a:hover{color: #3498db;}

.homeheader .centre .right{float: left;height: 100%;display: flex;flex-direction: column;justify-content: center;}
.homeheader .centre .right input{height: 14px;width: 148px;font-size: 14px; padding: 10px 58px 10px 16px;background: #fff;outline-style: none;outline-width: 0;border-radius: 16px;border: none;margin-top: calc(64px - 38px - 9px);color: #666666;}
.homeheader .centre .right .searchBtn{display:block;position: relative;right: -190px;top: -22px;width: 20px;height: 30px;z-index:3;background: url() no-repeat center center;background-size: cover;}

.homeheader .centre .right-img{height: 100%; float: right;display: flex;flex-direction: column;justify-content: center;}
.homeheader .centre .right-img img{height: 50px;width: 50px; border-radius: 50%;}

/*搜索框*/
.search-box{clear: both;height: 100px;width: 80%;border-bottom: 1px solid #EEEEEE;margin: 0 auto; padding: 32px 0;}
.search-box #input-box{width: 40%;height: 36px;margin: 0 auto;}
.search-box #input-box #search-id{height: 100%;width: 70%; background: #F9F9F9;border: 1px solid #EEEEEE;border-radius: 4px;color: #333333; outline: none;outline-style: none; }
.search-box #input-box .searchPageBtn{display: inline-block;height: 100%;line-height: 36px;padding-left: 28px;padding-right: 28px;background: #3498db;border-radius: 4px;font-size: 14px;cursor: pointer;}
.search-box #input-box .searchPageBtn:hover{    background: #00b5e5;}
.search-box #input-box a .fr{font-size: 14px;color: #442509;cursor: pointer;}
.search-box #input-box a .searchIcon{display: inline-block;width: 24px;height: 24px;background-image: url("/img/search.png");background-size: cover;vertical-align: middle;}

/*肚子*/
article{width: 80%;margin: 0 auto;clear: both;}

.articl-2-2-right{width: 100%;display: flex;justify-content: space-between;flex-wrap: wrap;margin-top: 10px;}
.articl-2-2-right-1{width: 15%; display: flex;justify-content: space-between;flex-direction: column;}
.articl-2-2-left-box{height:100%;width: 100%;}
.articl-2-2-left-box img{height: 185px;width: 100%;border-radius: 5%;transition: all 1s;}
.articl-2-2-left-box img:hover{transform: scale(1.03);}

.articl-2-2-right-box{height: 100%;width: 100%;}
.articl-2-2-right-box a{padding: 0px;margin: 0px;    white-space: nowrap;font-size: 18px;display: block;}
.articl-2-2-right-box span{padding-right: 5px;font-size: 0.9rem;}
.articl-2-2-right-box p{ color: #999999; font-size: 0.8rem;}
.articl-2-2-right-box p span{ font-size: 0.7rem;}
.red{color: red;font-size: 0.8rem;}

/*历史记录*/
.history{width: 40%;margin:0 auto;}
.history .history-1{width: 100%;height: 20px;margin-bottom: 5px;}
.history .history-1 .history-1-left{color: #999999;font-size: 1em;display: block;float: left;}
.history .history-1 .fa-trash-o{color: #999999;font-size: 20px;display: block;float: right;cursor: pointer;}
.history .history-1 .fa-trash-o:hover{color: #3498db;}

.history .history-box{width: 100%;}
.history .history-box div{width: 100%;height: 30px;  line-height: 30px;border-bottom: 1px solid #EEEEEE;clear: both;}

.history .history-box div .fa-plus{color: #999999; display: block;float: left;line-height: 2.4;font-size: 1em;}

.history .history-box div span{font-size: 1em;color: #999999;display: block;float: left;margin-left: 5px;cursor: pointer;}
.history .history-box div span:hover{color: #3498db;}

.history .history-box div .fa-times{font-size: 1em;color: #999999;display: block;float: right;line-height: 2;cursor: pointer;}
.history .history-box div .fa-times:hover{color: #3498db;}





/*响应式*/
@media screen and (max-width: 1100px) {

    .homeheader .centre{width: 100%;}
    article{width: 100%;padding-left: 10px;padding-right: 10px;}
    .search-box{width: 100%;padding-left: 10px;padding-right: 10px;}
    .search-box #input-box{width: 50%;}
}

@media screen and (max-width:900px){
    .homeheader .centre .left{display: none;}
    .homeheader .centre .right-img{display: none;}
    .homeheader .centre{width: 80%;}
    .articl-1-2 .articl-1-2-box a img{ max-width: 100%;max-height: 100%;}

}
@media screen and (max-width: 800px) {
    .homeheader{background: #ffffff;}
    .homeheader .centre{width: 100%;}
    .homeheader .centre .homeheader_centre{width: 100%;}
    .homeheader .centre .homeheader_centre li a{ color: #666;}
    .search-box #input-box{width: 60%;}
}
@media screen and (max-width: 700px) {
    .search-box{height: 60px;padding: 10px 0;}
    .search-box #input-box #search-id,.search-box #input-box .searchPageBtn{border-radius: 50px;}
    .search-box #input-box a .fr{display: none;}
    .search-box #input-box{width: 80%;}
     body{font-size: 10px}
    .article-1 .left{float: none;margin: 0 auto;}
    .articl-1-2 .articl-1-2-box a img{height: 190px;}
    .article-1 ul li a {padding-top: 2px;padding-bottom: 2px;padding-left: 5px;padding-right: 5px;font-size: 0.7rem;width: 14%; text-align: center;margin-bottom: 5px;}

    .homeheader .centre .homeheader_centre li:nth-child(2){display: none;}
    .homeheader .centre .homeheader_centre li:nth-child(3){display: none;}
    .homeheader .centre .homeheader_centre li:nth-child(4){display: none;}
    .homeheader .centre .homeheader_centre li:nth-child(5){display: none;}

    .homeheader{height: 40px;}
    .homeheader .centre .homeheader_centre li{line-height: 40px;}

    .articl-2-2-right-1{width: 100%; flex-direction: row; border-bottom: 1px solid #EEEEEE;height: 150px; margin-top: 2px; padding:3px;}
    .articl-2-2-left-box img{height: 100%;}
    .articl-2-2-left-box{width: 30%;}
    .articl-2-2-right-box{width: 65%;}


    .history{width: 100%;}
    .history .history-box div .fa-times{line-height: 2.8;}
    .history .history-box div .fa-plus{line-height: 2.8;}
}

@media screen and (max-width: 370px) {
    .search-box #input-box{width: 90%;}
}